<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字符串(string)和数组(array)</title>
</head>
<body>
    <h1>人员列表</h1>
    <ul id="list"></ul>
    <script>
        // 1.字符串
        // 属性：就是值；方法：就是函数
        var str = 'abcdef';
        console.log(str.length);
        console.log(str.indexOf('bcr'));
        // 截取
        console.log(str.slice(1,3));
        console.log(str.slice(1));
        console.log(str.slice(-3));
        console.log(str.slice(-3,-1));
        // 分割
        var time = '2024-11-06'.split('-');
        console.log(time[0]);
        console.log(time[1]);
        console.log(time[2]);
        // 数组的遍历
        var data = [
            {id:12344,name:'张三',age:18,gender:'男'},  
            {id:12345,name:'李四',age:19,gender:'女'},
            {id:12346,name:'王五',age:20,gender:'男'},
            {id:12347,name:'赵六',age:21,gender:'女'},
            {id:12348,name:'孙七',age:22,gender:'男'},
            {id:12349,name:'周八',age:23,gender:'女'},
            {id:12350,name:'吴九',age:24,gender:'男'},
        ]
        var list = document.getElementById('list');
        for(var i = 0; i < data.length; i++){
            list.innerHTML += `
                <li>
                    <span>${data[i].name}</span>
                    <span>${data[i].age}</span>
                    <span>${data[i].gender}</span>
                </li>
            `;
        }
        console.log(console)
    </script>
    <script>
        // ... existing string manipulation code ...

        // 2.数组的常用方法
        var arr = ['apple', 'banana', 'orange'];
        
        // 添加和删除元素
        arr.push('grape');              // 在末尾添加元素
        arr.unshift('pear');            // 在开头添加元素
        arr.pop();                      // 删除并返回最后一个元素
        arr.shift();                    // 删除并返回第一个元素
        
        // 数组转换
        console.log(arr.join('-'));     // 将数组用指定分隔符连接成字符串
        
        // 数组排序
        arr.sort();                     // 按字母顺序排序
        arr.reverse();                  // 反转数组
        
        // 数组截取和拼接
        var newArr = arr.slice(1, 3);   // 截取部分数组
        arr.splice(1, 1, 'mango');      // 从索引1开始删除1个元素，并插入'mango'
        
        // 数组查找
        console.log(arr.indexOf('banana'));     // 查找元素位置
        console.log(arr.includes('apple'));     // 检查元素是否存在
        
        // 数组遍历
        arr.forEach(function(item, index) {
            console.log(index + ': ' + item);
        });
        
        // 数组映射和过滤
        var upperArr = arr.map(item => item.toUpperCase());    // 转换数组元素
        var filtered = arr.filter(item => item.length > 5);    // 过滤数组元素
    </script>
</body>
</html>